<template>
  <div>
    <div class="orderDetails">
      <header class="mint-header is-fixed">
        <div class="mint-header-button is-left">
          <button class="mint-button mint-button--default mint-button--normal">
            <span class="mint-button-icon">
              <i class="mintui mintui-back" @click="$router.go(-1)"></i>
            </span>
          </button>
        </div>
        <h1 class="mint-header-title">我的订单</h1>
        <div class="mint-header-button is-right">
          <button class="mint-button mint-button--default mint-button--normal">
            <label class="mint-button-text">
              <i class="mint-toast-icon mintui mintui-search"></i>
            </label>
          </button>
        </div>
      </header>
      <div class="status">
        <div>
          <p>{{orderDetails.orderStatus|orderStatus}}</p>
          <p class="tips" v-if="orderDetails.orderStatus == 1">{{time}}</p>
          <p class="tips" v-if="orderDetails.orderStatus == 5">{{orderDetails.closeReason}}</p>
          <img src="./../../assets/common/images/pay.png" alt="">
        </div>
      </div>
      <div class="receiver-info">
        <img src="./../../assets/common/images/none-bg.jpg" alt="" class="pos-icon">
        <p>
          <span>收货人：{{orderDetails.receiver}}</span>
          <span style="float:right;" v-if="!orderDetails.orderTel">{{orderDetails.orderPhone}}</span>
          <span style="float:right;" v-if="orderDetails.orderTel">{{orderDetails.orderPhone}},{{orderDetails.orderTel}}</span>
        </p>
        <p>收货地址：{{orderDetails.provinceName}} {{orderDetails.cityName}} {{orderDetails.areaName}}</p>
        <p style="margin-left:62px;">{{orderDetails.orderAddress}}</p>
      </div>
      <div class="wuliu" v-if="orderDetails.orderStatus == 3||orderDetails.orderStatus == 4">
        <img src="./../../assets/common/images/none-bg.jpg" alt="" class="pos-icon">
        <p>物流公司：{{orderDetails.express}}</p>
        <p>运单号：{{orderDetails.expressNumber}}</p>
        <button @click="post(orderDetails.express, orderDetails.expressNumber)">查看物流</button>
      </div>
      <div class="orderGoods">
        <div class="orderIndex">
          <div class="c-title">{{orderDetails.supplierWarehouse}}
            <span style="float:right;">拨打联系商户</span>
          </div>
          <div class="c-order" v-for="(item,index) in orderDetails.orderGoodsList" :key="index">
            <div class="order-mid">
              <p>{{item.sellingPoints}}</p>
              <span>货号：{{item.goodsCode}}</span><br>
              <span v-if="!item.sizeAlias">尺码：{{item.goodsSpec}}</span>
              <span v-if="item.sizeAlias">尺码：{{item.goodsSpec}}({{item.sizeAlias}})</span>
            </div>
            <img :src="item.goodsImg" alt="" class="pic">
            <div class="order-right">
              <p>￥{{item.goodsMoney|formatMoney}}</p>
              <span class="count">￥{{item.goodsPrice|formatMoney}}</span><br>
              <span>x{{item.goodsNum}}</span>
              <button v-if="item.returnStatus">{{item.returnStatus|returnStatus}}</button>
            </div>
          </div>
          <div class="price">
            <p>
              <span>商品总价</span>
              <span style="float:right;">￥{{orderDetails.orderDiscountTotalMoney|formatMoney}}</span>
            </p>
            <p>
              <span>运费（快递）</span>
              <span style="float:right;">￥{{orderDetails.orderFreight|formatMoney}}</span>
            </p>
            <p style="color:#000;font-size:14px;">
              <span>订单总价</span>
              <span style="float:right;">￥{{orderDetails.orderPayPrice|formatMoney}}</span>
            </p>
          </div>
          <div class="payPrice">
            <span>实付款</span>
            <span style="float:right;color:red">￥{{orderDetails.userPayPrice|formatMoney}}</span>
          </div>
        </div>
        <div class="remark">
          <h3>留言</h3>
          <p>{{orderDetails.orderRemark}}</p>
        </div>
        <div class="orderInfo">
          <p v-if="orderDetails.orderCode">订单编号：{{orderDetails.orderCode}}</p>
          <p v-if="orderDetails.myOrderCode">自定义订单号：{{orderDetails.myOrderCode}}</p>
          <p v-if="orderDetails.payType">支付方式：{{orderDetails.payType|payType}}</p>
          <p v-if="orderDetails.orderPayCode">支付交易号：{{orderDetails.orderPayCode}}</p>
          <p v-if="orderDetails.orderCreateDate">创建时间：{{orderDetails.orderCreateDate|formatDate( 'yyyy-MM-dd')}}</p>
          <p v-if="orderDetails.orderPayDate">付款时间：{{orderDetails.orderPayDate|formatDate( 'yyyy-MM-dd')}}</p>
          <p v-if="orderDetails.orderLogisDate">发货时间：{{orderDetails.orderLogisDate|formatDate( 'yyyy-MM-dd')}}</p>
          <p v-if="orderDetails.orderRevokeDate">撤销时间：{{orderDetails.orderRevokeDate|formatDate( 'yyyy-MM-dd')}}</p>
          <p v-if="orderDetails.orderConfirmDate">交易完成：{{orderDetails.orderConfirmDate|formatDate( 'yyyy-MM-dd')}}</p>
        </div>
      </div>
      <div class="orderFoot">
        <div class="btn-box">
          <button v-if="orderDetails.orderStatus == 1" @click="close(orderDetails.orderId)">撤销订单</button>
          <button v-if="orderDetails.orderStatus == 2||orderDetails.orderStatus == 3||orderDetails.orderStatus == 4">申请售后</button>
          <button v-if="orderDetails.orderStatus == 3||orderDetails.orderStatus == 4" @click="post(orderDetails.express, orderDetails.expressNumber)">查看物流</button>
          <button class="orange payBtn" v-if="orderDetails.orderStatus == 1">付款</button>
          <button class="orange confirm" v-if="orderDetails.orderStatus == 3" @click="confirm(orderDetails.orderId)">确认收货</button>
          <button v-if="orderDetails.orderStatus == 4||orderDetails.orderStatus == 5" @click="deleteOrder(orderDetails.orderId)">删除订单</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getOrderDetails,
  closeOrder,
  deleteCloseOrder,
  confirmOrder
} from '@/api/shop'
import {
  mapGetters
} from 'vuex'
import { MessageBox } from 'mint-ui'
export default {
  data() {
    return {
      flag: false,
      time: '',
      orderDetails: {}
    }
  },
  watch: {
  },
  components: {
  },
  created() {
    this.fetchData()
  },
  filters: {
    payType(val) {
      return val === 0 ? '' : val === 1 ? '微信' : val === 2 ? '支付宝' : val === 3 ? '银联' : val === 4 ? '转账' : val === 5 ? '余额' : val === 6 ? '财付通' : '未知'
    },
    orderStatus(val) {
      return val === 0 ? '' : val === 1 ? '等待买家付款' : val === 2 ? '等待仓库发货' : val === 3 ? '等待买家确认收货' : val === 4 ? '完成交易' : val === 5 ? '交易关闭' : '未知'
    },
    returnStatus(val) {
      return val === 0 ? '' : val === 1 ? '待审核' : val === 2 ? '等待寄回' : val === 3 ? '已寄回' : val === 4 ? '已确认' : val === 5 ? '已拒绝' : val === 6 ? '已撤销' : val === 7 ? '待退款' : val === 8 ? '退款成功' : '未知'
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.timer(this.orderDetails.secondTime)
    // })
  },
  methods: {
    fetchData() {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      // 获取购物车信息
      const formData = {
        userId: this.userInfo.id,
        orderId: this.$route.query.orderId
      }
      getOrderDetails(formData).then(res => {
        this.orderDetails = res.data.orderDetails
        this.timer(this.orderDetails.secondTime)
      })
    },
    timer(intDiff) {
      const _this = this
      window.setInterval(function() {
        let day = 0
        let hour = 0
        let minute = 0
        let second = 0
        if (intDiff > 0) {
          day = Math.floor(intDiff / (60 * 60 * 24))
          hour = Math.floor(intDiff / (60 * 60)) - (day * 24)
          minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60)
          second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
        }
        if (minute <= 9) minute = '0' + minute
        if (second <= 9) second = '0' + second
        _this.time = day + '天' + hour + '小时' + minute + '分' + second + '秒后， 系统将关闭交易'
        intDiff--
      }, 1000)
    },
    close(orderId) {
      MessageBox.confirm('确定撤销该订单?').then(action => {
        closeOrder({ orderId: orderId }).then(res => {
          // Toast('订单已撤销')
          this.orderList = []
          this.fetchData()
        })
      })
    },
    deleteOrder(orderId) {
      MessageBox.confirm('确定删除订单?').then(action => {
        deleteCloseOrder({ orderId: orderId }).then(res => {
          // Toast('订单已删除')
          this.orderList = []
          this.fetchData()
        })
      })
    },
    post(express, expressNumber) {
      window.location.href = 'https://m.kuaidi100.com/index_all.html?type=' + express + '&postid=' + expressNumber
    },
    confirm(orderId) {
      // 判断是否登录
      this.isLogin = this.userInfo ? 1 : 0
      if (!this.userInfo) return
      // 确认收货
      const formData = {
        userId: this.userInfo.id,
        orderId: orderId
      }
      MessageBox.confirm('确认收货?').then(action => {
        confirmOrder(formData).then(res => {
          // Toast('订单已删除')
          this.orderList = []
          this.fetchData()
        })
      })
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';
.orderDetails {
  min-height: 100vh;
  margin-top: 45px;
  header {
    height: 45px;
    background-color: #F60;
    color: #FFF;
  }
  .status {
    background-color: #F60;
    div {
      padding: 30px 10%;
      position: relative;
      p {
        line-height: 36px;
        font-size: 18px;
        color: #FFF;
      }
      .tips {
        font-size: 12px;
        line-height: 20px;
      }
      img {
        height: 40px;
        position: absolute;
        top: 50%;
        margin-top: -20px;
        right: 5%;
      }
    }
  }
  .receiver-info {
    height: 78px;
    background-color: #fff;
    padding: 15px 5% 0 15%;
    position: relative;
    p {
      color: #A1A1A1;
      line-height: 15px;
      margin-bottom: 5px;
    }
    .pos-icon {
      position: absolute;
      width: 22px;
      height: 22px;
      top: 30px;
      left: 4%;
    }
  }
  .wuliu {
    height: 55px;
    background-color: #fff;
    padding: 10px 5% 0 15%;
    position: relative;
    margin-top: 10px;
    p {
      color: #A1A1A1;
      line-height: 15px;
      margin-bottom: 5px;
    }
    .pos-icon {
      position: absolute;
      width: 22px;
      height: 22px;
      top: 50%;
      margin-top: -11px;
      left: 4%;
    }
    button {
      color: #468EE5;
      width: 64px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 2px;
      border: 1px solid #468EE5;
      background-color: #fff;
      display: inline-block;
      position: absolute;
      top: 50%;
      margin-top: -12px;
      right: 4%;
    }
  }
  .orderGoods {
    padding-bottom: 55px;
    .orderIndex {
      background-color: #fff;
      margin-top: 10px;
      .c-title {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
      }
      .c-order {
        padding: 10px 100px;
        background-color: rgb(252, 252, 252);
        overflow: hidden;
        margin-bottom: 3px;
        .pic {
          position: relative;
          float: left;
          width: 70px;
          height: 85px;
          margin-left: -100%;
          left: -90px;
        }
        .order-mid {
          position: relative;
          float: left;
          width: 100%;
          height: 100%; //   line-height: 25px;
          p {
            line-height: 15px;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          span {
            color: rgb(190, 190, 190);
            margin-top: 10px;
            display: inline-block;
          }
        }
        .order-right {
          text-align: right;
          position: relative;
          vertical-align: top;
          float: right;
          width: 65px;
          height: 100%;
          margin-left: -190px;
          right: -90px;
          line-height: 25px;
          span {
            color: rgb(190, 190, 190);
            float: right;
          }
          .count {
            text-decoration: line-through;
          }
          button {
            width: 65px;
            height: 25px;
            display: inline-block;
            border: 1px solid #CECECE;
            background-color: #F0F0F0;
            border-radius: 2px;
            margin-top: 15px;
          }
        }
      }
      .price {
        padding: 10px 10px;
        border-bottom: 1px solid #EAEEF1;
        p {
          color: #A1A1A1;
          line-height: 20px;
        }
      }
      .payPrice {
        line-height: 33px;
        padding: 0 10px;
        font-size: 14px;
      }
    }
    .remark {
      background-color: #fff;
      margin-top: 10px;
      padding: 10px 10px;
      h3 {
        font-size: 14px;
        margin-bottom: 10px;
      }
      p {
        color: #A1A1A1;
      }
    }
    .orderInfo {
      padding: 10px;
      color: #A1A1A1;
      line-height: 20px;
      margin-top: 10px;
      background-color: #fff;
    }
  }
  .orderFoot {
    background-color: #fff;
    height: 45px;
    padding: 0 15px;
    position: fixed;
    bottom: 0;
    width: 100%;
    -moz-box-shadow: 0px -2px 1px #EAEEF1;
    -webkit-box-shadow: 0px -2px 1px #EAEEF1;
    box-shadow: 0px -2px 1px #EAEEF1;
    .btn-box {
      text-align: right;
      button {
        width: 65px;
        height: 25px;
        display: inline-block;
        color: #8B8B8B;
        border: 1px solid #CECECE;
        background-color: #FFF;
        border-radius: 2px;
        margin-right: 10px;
        margin-top: 10px;
      }
      .orange {
        color: #F60;
        border-color: #F60;
      }
    }
  }
}
</style>
